import React from 'react';
import { Select } from 'antd';
import { FullscreenOutlined, FullscreenExitOutlined } from '@ant-design/icons';
import { connect } from 'react-redux';
import * as utils from '../../../assets/js/utils/index';
import * as Request from '../../../services/home/radar/index';
import action from '../../../store/actions/index';
import ProTipsComponent from '../../../components/proTips/index';
import MapComponent from '../../../components/map/index';
import Css from '../../../assets/css/home/typhoon/index.css';
import { sort } from 'semver';
const { Option } = Select;

class Typhoon extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            typhoonValue: '',
            typhoons: [],
            tabs: [
                { name: '全部', type: 'all', checked: true },
                { name: '风流场', type: 'streamline', checked: false },
                { name: '等值面', type: 'volume', checked: false },
                { name: '风速场', type: 'iso', checked: false },
                { name: '剖面', type: 'probe', checked: false }
            ],
            products: [],
            typhoonMapData: [],
            typhoonTime: ''
        }
        this.atime = '';
        this.timer = null;
        this.index = 0;
    }

    componentDidMount(){
        this.getTyphoons();
    }

    //获取台风类型
    getTyphoons(){
        Request.getTyphoons().then(res => {
            if(res.retcode === '1'){
                this.setState({ typhoons: res.infoList, typhoonValue: res.infoList[0].typhoon_id }, () => {
                    this.getTyphoonMapData();
                    this.getTpProducts();
                });
            }
        });
    }

    //获取台风产品数据
    getTpProducts(){
        Request.getTpProducts(this.state.typhoonValue).then(res => {
            if(res.retcode === '1'){
                const { streamline, volume, iso, probe } = res;
                const products = [
                    { name: '风流场', type: 'streamline', checked: false, data: streamline },
                    { name: '风速等值面', type: 'volume', checked: false, data: volume },
                    { name: '风速场体', type: 'iso', checked: false, data: iso },
                    { name: '相对湿度剖面', type: 'probe',  checked: false, data: probe }
                ];
                this.props.dispatch(action.typhoon.addProducts({ products, exitsProducts: products }));
            }else{
                this.props.dispatch(action.typhoon.addProducts({ products:[], exitsProducts:[] }));
            }
        });
    }

    //获取台风地图实时数据
    getTyphoonMapData(){
        Request.getTyphoonMapData(this.state.typhoonValue).then(res => {
            if(res.retcode === '1'){
                this.setState({ typhoonMapData: res.routeList });
            }
        });
    }

    //台风类型选择
    handleChange(value){
        this.setState({ typhoonValue: value }, () => {
            this.getTyphoonMapData();
            this.getTpProducts();
        });
    }

    //产品类型切换
    changeTab(index){
        const { tabs } = this.state;
        const aTempTabs = utils.deepClone(tabs);
        aTempTabs.map(item => item.checked = false);
        aTempTabs[index].checked = true;
        this.setState({ tabs: aTempTabs });
        this.props.dispatch(action.typhoon.changeProducts({ type: aTempTabs[index].type }));
        this.getTimeIndex(this.atime);
    }

    //全屏展示产品
    fullscreen(index, checked, type, time){
        const aTempTabs = utils.deepClone(this.state.tabs);
        aTempTabs.map(item => item.checked = item.type === type ? true : false);
        this.setState({ tabs: aTempTabs });
        this.props.dispatch(action.typhoon.fullscreen({ index, checked }));
        this.getTimeIndex(time);
    }

    //获取当前时间的下标
    getTimeIndex(time){
        let allTime = [];
        const aProducts = utils.deepClone(this.props.typhoon.products);
        aProducts.length > 0 && aProducts.map(item => {
            if(item.checked){ allTime = item.data.map(ktem => ktem.data_time); }
        });
        const sortTime = allTime.sort(utils.sortDownDate);
        sortTime.map((ptem, pndex) => {
            if(ptem === time){ this.index = pndex; };
        });
    }

    //退出全屏
    exitFullScreen(){
        const aTempTabs = utils.deepClone(this.state.tabs);
        aTempTabs.map(item => item.checked = item.type === 'all' ? true : false);
        this.setState({ tabs: aTempTabs });
        this.props.dispatch(action.typhoon.exitFullscreen());
    }

    //产品图片轮播
    carousel(time){
        const aProducts = utils.deepClone(this.props.typhoon.products);
        if(aProducts.length > 0){
            aProducts.map(item => {
                const { data } = item;
                data.map((ktem, kndex) => {
                    if(ktem.data_time === time){
                        data.splice(kndex, 1);
                        data.unshift(ktem);
                    }
                });
                this.setSliderIndex(item, data, time);
            });
            this.props.dispatch(action.typhoon.carousel({ products: aProducts }));
        }
    }

    //根据台风运动路径切换产品数据
    changeProSouce(time){
        this.atime = time;
        this.carousel(time);
    }

    //设置slider下标
    setSliderIndex(item, data, time){
        const aData = utils.deepClone(data); 
        if(item.checked){
            const sortData = aData.sort((a, b) => Date.parse(a.data_time) - Date.parse(b.data_time));
            sortData.map((ktem, kndex) => {
                if(ktem.data_time === time){
                    this.index = kndex;
                }
            });
        }
    }

    //slider点击事件
    handleSliderClick(index, data){
        const aData = utils.deepClone(data); 
        const sortData = aData.sort((a, b) => Date.parse(a.data_time) - Date.parse(b.data_time));
        const time = sortData[index].data_time;
        this.setState({ typhoonTime: time });
    }

    componentWillUnmount(){
        clearInterval(this.timer);
        this.setState = (state, callback) => { 
            return ; 
        }
    }

    render(){
        const { typhoons, tabs, typhoonValue, typhoonMapData, typhoonTime } = this.state;
        const { products } = this.props.typhoon;
        return (
            <div className={Css['page']}>
                {/* 地图模块 */}
                <div className={Css['typhoon-wrapper']}>
                    <div className={Css['typhoon-select']}>
                        <Select 
                            value={typhoonValue} 
                            style={{ width:'3.57rem' }} 
                            onChange={(value) => this.handleChange(value)}
                            dropdownStyle={{backgroundColor:'#02092A'}}
                        >
                            {
                                typhoons.length > 0 ? typhoons.map((item, index) => {
                                    return (
                                        <Option style={{color:'#729E9E'}} key={item.typhoon_id} value={item.typhoon_id}>{item.typhoon_chinese_name}</Option>
                                    )
                                }) : ''
                            }
                        </Select>
                    </div>
                    <div className={Css['map']}>
                        <MapComponent 
                            showLogo={true} 
                            showlogoLeft={true} 
                            data={typhoonMapData} 
                            changeProSouce={(item) => this.changeProSouce(item)} 
                            typhoonTime={typhoonTime}
                        />
                    </div>
                </div>
                {/* 产品模块 */}
                <div className={Css['product-wrapper']}>
                    <div className={Css['product-tabs']}>
                        {
                            tabs.length > 0 ? tabs.map((item, index) => {
                                return (
                                    <div key={index} className={item.checked ? Css['item']+' '+Css['active'] : Css['item']} onClick={() => this.changeTab(index)}>
                                        {item.name}<div className={Css['arrow']}></div>
                                    </div>
                                )
                            }) : ''
                        }
                    </div>
                    <div className={Css['product-contents']}>
                        {
                            products.length > 0 ? 
                                products.every(item => !item.checked) ? 
                                    products.map((item, index) => {
                                        return (
                                            <div key={index} className={Css['product']}>
                                                <div className={Css['proTips']}><ProTipsComponent name={item.name} date={item.data[0].data_time} /></div>
                                                <div className={Css['fullscreen']}>
                                                    <FullscreenOutlined style={{fontSize:'25px'}} onClick={() => this.fullscreen(index, !item.checked, item.type, item.data[0].data_time) } />
                                                </div>
                                                <div className={Css['product-img']}>
                                                    <img src={item.data[0].path} alt="loading" />
                                                </div>
                                            </div>
                                        )
                                    })
                                : products.map((item, index) => {
                                    return (
                                        <div key={index} className={item.checked ? Css['product']+' '+Css['active'] : Css['product']+' hide'}>
                                            <div className={Css['proTips']}><ProTipsComponent name={item.name} date={item.data[0].data_time} /></div>
                                            <div className={Css['fullscreen']}>
                                                {  
                                                    item.checked ? <FullscreenExitOutlined style={{fontSize:'25px'}} onClick={() => this.exitFullScreen()} /> 
                                                    : <FullscreenOutlined style={{fontSize:'25px'}} onClick={() => this.fullscreen(index, !item.checked, item.type)} /> 
                                                }
                                            </div>
                                            <div className={Css['product-img']}><img src={item.data[0].path} alt="loading" /></div>
                                            <div className={Css['slider']}>
                                                {
                                                    item.checked && item.data.length > 0 ? item.data.map((ktem, kndex) => {
                                                        return (
                                                            <div 
                                                                key={kndex} 
                                                                className={this.index === kndex ? Css['item']+' '+Css['active'] : Css['item']}
                                                                onClick={() => this.handleSliderClick(kndex, item.data)}
                                                            >    
                                                            </div>
                                                        )
                                                    }) : ''
                                                }
                                            </div>
                                        </div>
                                    )
                                })
                            :  <div className='null-item'><img src={require('../../../assets/images/common/empty.png')} alt="loading" />暂无数据</div>
                        }
                    </div>
                </div>
            </div>
        )
    }
}

export default connect((store) => {
    return store;
})(Typhoon);